<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .red{
            color:red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <span @click="status=item" :class="{'red':status === item}" 
            v-for="item in tabList">{{item}}</span>
        </div>
        <div class="con">
            <div class="inner-con" v-show="status === 'html'">html内容</div>
            <div class="inner-con" v-show="status === 'js'">js内容</div>
            <div class="inner-con" v-show="status === 'css'">css内容</div>
        </div>
        <ul>
            <li v-for="(item,index) in list">
                <input type="checkbox" @click="chooseItem(index)" v-model="item.isChecked">{{item.isChecked}}{{item.songName}} ---- {{item.name}}
            </li>
        </ul>
        <input type="checkbox" @click="chooseAll" v-model="checkAll">全选{{checkAll}}
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                status:'html',
                tabList:[
                    'html',
                    'js',
                    'css'
                ],
                checkAll:false,
                list:[
                    {
                        songName:'精忠报国',
                        name:'牛博',
                        isChecked:false
                    },
                    {
                        songName:'姑娘',
                        name:'王源',
                        isChecked:false
                    },
                    {
                        songName:'痒',
                        name:'zs',
                        isChecked:false
                    },
                    {
                        songName:'痒',
                        name:'lisi',
                        isChecked:false
                    }
                ]
            },
            methods:{
                chooseAll(){
                    this.checkAll = !this.checkAll;
                    this.list.forEach(item => {
                        item.isChecked = this.checkAll;
                    })
                },
                chooseItem(index){
                    this.list[index].isChecked = !this.list[index].isChecked;
                    this.checkAll = this.list.every(item => item.isChecked)
                }
            }
        })
    </script>
</body>
</html>